"use client"

import type React from "react"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Search, Play } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"

interface MV {
  id: number
  title: string
  artist: string
  cover: string
  duration: string
  views: string
  url?: string
  file?: File
}

interface MVPickerProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (mv: MV) => void
}

// 模拟的MV数���
const mockMVs: MV[] = [
  {
    id: 1,
    title: "告白气球 MV",
    artist: "周杰伦",
    cover: "/placeholder.svg",
    duration: "4:10",
    views: "500万",
  },
  {
    id: 2,
    title: "稻香 MV",
    artist: "周杰伦",
    cover: "/placeholder.svg",
    duration: "3:42",
    views: "400万",
  },
  {
    id: 3,
    title: "晴天 MV",
    artist: "周杰伦",
    cover: "/placeholder.svg",
    duration: "4:30",
    views: "600万",
  },
]

export function MVPicker({ open, onOpenChange, onSelect }: MVPickerProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [externalFile, setExternalFile] = useState<File | null>(null)

  const filteredMVs = mockMVs.filter(
    (mv) =>
      mv.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      mv.artist.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setExternalFile(file)
    }
  }

  const handleExternalFileSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (externalFile) {
      onSelect({
        id: Date.now(),
        title: externalFile.name,
        artist: "未知艺术家",
        cover: "/placeholder.svg",
        duration: "未知",
        views: "未知",
        file: externalFile,
      })
      onOpenChange(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>选择MV</DialogTitle>
        </DialogHeader>
        <Tabs defaultValue="internal">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="internal">平台MV</TabsTrigger>
            <TabsTrigger value="external">上传MV</TabsTrigger>
          </TabsList>
          <TabsContent value="internal">
            <div className="relative mb-4">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="搜索MV"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto">
              {filteredMVs.map((mv) => (
                <div key={mv.id} className="group space-y-2">
                  <div className="relative aspect-video rounded-lg overflow-hidden">
                    <img src={mv.cover || "/placeholder.svg"} alt={mv.title} className="w-full h-full object-cover" />
                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <Button variant="secondary" size="icon" className="h-12 w-12">
                        <Play className="h-6 w-6" />
                      </Button>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-medium truncate">{mv.title}</h4>
                    <p className="text-sm text-muted-foreground">{mv.artist}</p>
                    <div className="flex items-center justify-between text-xs text-muted-foreground mt-1">
                      <span>{mv.duration}</span>
                      <span>{mv.views}次观看</span>
                    </div>
                  </div>
                  <Button className="w-full" onClick={() => onSelect(mv)}>
                    选择
                  </Button>
                </div>
              ))}
            </div>
          </TabsContent>
          <TabsContent value="external">
            <form onSubmit={handleExternalFileSubmit} className="space-y-4">
              <div className="space-y-2">
                <label htmlFor="external-file" className="text-sm font-medium">
                  上传MV文件
                </label>
                <Input id="external-file" type="file" accept="video/*" onChange={handleFileChange} required />
              </div>
              <Button type="submit">添加外部MV</Button>
            </form>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}

